<template>
	<div class="car-type-price">
    <div class="title__group" @click="panelFn" :style="handleTitleSly">
      <img :src="handleDataList.carTypeUrl">
      <p class="model">{{ handleDataList.title }}</p>
      <p class="price">¥{{ handleDataList.lists[0].price }}起 <small>/辆</small></p>
      <icon type="icon-unfold" size="2" :class="panel ? 'down' : 'upward'"/>
    </div>
    <div class="source__group" :style="handleSourceSly" ref="source__group">
      <div class="list" v-for="item in handleDataList.lists">
        <img :src="'/static/images/' + item.supplierCd + '.png'">
        <!--<img src="../../../../../static/images/DiDi.png">-->
        <p class="model">{{ item.supplierName }}</p>
        <p class="price">¥{{ item.price }}</p>
        <div class="btn_group">
          <div class="btn" @click="onClickReservation(item)">预订</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'car-type-price',
  data () {
    return {
      panel: true
    }
  },
  props: {
    data: Object
  },
  computed: {
    handleCarImageType () {
      let url = '';
      switch (this.handleDataList.title) {
      case '经济型':
        url = 'car-type-x.jpg'; break;
      case '舒适型':
        url = 'car-type-xx.jpg'; break;
      case '商务型':
        url = 'car-type-xxx.jpeg'; break;
      case '豪华型':
        url = 'car-type-xxxx.jpeg'; break;
      case '奢华型':
        url = 'car-type-xxxxx.jpeg'; break;
      }
      return url;
    },
    handleDataList () {
      return this.data
    },
    handleSourceSly () {
      let _height = '0';
      if (this.$refs.source__group) {
        _height = this.$refs.source__group.scrollHeight
      }
      return {
        height: this.panel ? '0' : `${_height}px`
      }
    },
    handleTitleSly () {
      return {
        'border-bottom-left-radius': this.panel ? '5px' : '0',
        'border-bottom-right-radius': this.panel ? '5px' : '0'
      }
    }
  },
  methods: {
    panelFn () {
      this.panel = !this.panel
    },
    onClickReservation (item) {
      Object.assign(item, {
        createTime: this.data.createTime
      });
      this.$emit('reservation', item);
    }
  }
}
</script>

<style lang="stylus" type="text/stylus">
  @import "~assets/css/theme"

  .car-type-price
    padding 1 * .61rem
    padding-bottom 0
    transition: all .5s
    .title__group
      border-top-left-radius 5px
      border-top-right-radius 5px
      padding 1 * .61rem
      overflow hidden
      background #fff
      display flex
      justify-content space-between
      align-items center
      transition all 1s
      img
        width 20%
      .model
        width 25%
        text-align center
        font-size $sl_font_size_14
      .price
        width 40%
        text-align right
        font-size $sl_font_size_14
        small
          font-size $sl_font_size_small
          color $sl_font_color_desc
      .icon
        width 15%
        text-align right
        &.down
          background #fff
          i
            display inline-block
            transition all .5s
            transform rotate(0deg)
        &.upward
          i
            display inline-block
            transition all .5s
            transform rotate(-180deg)
    .source__group
      border-bottom-left-radius 5px
      border-bottom-right-radius 5px
      overflow hidden
      height 0
      transition all .5s
      .list
        padding 1 * .61rem 1.5 * .61rem
        background #ddd
        display flex
        justify-content space-between
        align-items center
        font-size $sl_font_size_small
        img
          width 10%
        .model
          width 30%
          text-align center
        .price
          width 40%
          text-align right
        .btn_group
          width 20%
          text-align right
          .btn
            padding 5px 8px
            border-radius 4px
            background #a3d0dd
            color #fff
            display inline-block
</style>
